{extend name="base"/}
{block name="resources"}
<style>
    #container{ width: 650px; height: 500px; }
    .empty-address{ display: none; }
    .address-content {display: inline-block;vertical-align: top;}
    .ns-form {margin-top: 0;}
    .layui-input-block {overflow: hidden;}
    .ns-check-member .layui-btn {
        position: absolute;
        top: 1px;
        border-color: #e5e5e5;
        padding: 0 10px;
        border-right: 0;
        border-top: 0;
        border-bottom: 0;
        left: 207px;
        height: 32px;
    }
    /* 关联会员 */
    .ns-search-result { border: 1px solid; padding: 15px 30px 15px 15px; display: flex; align-items: center; position: relative;margin-top:10px;border-color: #e5e5e5 !important; }
    .ns-search-res-img { width: 50px; height: 50px; margin-right: 5px; text-align: center; line-height: 50px; }
    .ns-search-res-img img { max-width: 100%; max-height: 100%; }
    .ns-search-res-intro p { line-height: 24px; }
    .ns-search-res-close { position: absolute; top: 5px; right: 5px; }

</style>
{/block}
{block name="main"}

<div class="layui-form ns-form flex" lay-filter="editleader">
    <div class="layui-form-item ns-check-member-box">
        <label class="layui-form-label"><span class="required">*</span>关联前台会员：</label>
        <div class="layui-input-block ns-check-member">

            <input class="ns-member-id" type="hidden" name="member_id" value="{$leader_info.member_id}"/>
            <div class="ns-search-result layui-input-inline ns-border-color-gray">
                <div class="ns-search-res-img">
                    {if condition = "$member_info['headimg'] eq ''"}
                    <img src="{:img($default_headimg)}" />
                    {else /}
                    <img src="{:img($member_info['headimg'])}" />
                    {/if}

                </div>
                <div class="ns-search-res-intro">
                    <p>用户名：{$member_info.username}</p>
                    <p>电话：{$member_info.mobile}</p>
                </div>
                <div class="ns-search-res-close" onclick="closeMember()">
                    <i class="iconfont iconclose_light"></i>
                </div>
            </div>
        </div>
        <p class="ns-word-aux">关联会员后才能在手机上使用团长核销功能</p>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>团长名称：</label>
        <div class="layui-input-block">
            <input name="name" type="text" lay-verify="required" class="layui-input ns-len-long" placeholder="请输入团长名称"  value="{$leader_info.name}">
        </div>
        <div class="ns-word-aux">团长名称</div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>团长手机号：</label>
        <div class="layui-input-block">
            <input name="mobile" type="text" lay-verify="mobile|required"  class="layui-input ns-len-long" placeholder="请输入团长手机号" value="{$leader_info.mobile}">
        </div>
        <div class="ns-word-aux">已进行手机号验证，请填写正确的手机号</div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>自提点：</label>
        <div class="layui-input-block">
            <input name="community" type="text" lay-verify="required" class="layui-input ns-len-long" placeholder="请输入自提点" value="{$leader_info.community}">
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">微信号：</label>
        <div class="layui-input-block">
            <input name="wechat" type="text" class="layui-input ns-len-long" placeholder="请输入微信号" value="{$leader_info.wechat}">
        </div>
        <div class="ns-word-aux">微信号码</div>
    </div>

    {if in_array($leader_info.status_info.const, ['STATUS_NORMAL', 'STATUS_FREEZE'])}
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>团长等级：</label>
        <div class="layui-input-inline ns-len-mid">
            <select class="member_level" name="level_id" lay-verify="level_id" lay-filter="level_id">
                <option value="">请选择</option>
                {volist name='community_level' id='vo'}
                <option value="{$vo.level_id}" {if $vo.level_id eq $leader_info.level_id}selected{/if}>{$vo.level_name} ({$vo.commission_rate}%)</option>
                {/volist}
            </select>
        </div>
    </div>
    {/if}


    <div class="layui-form-item">
        <label class="layui-form-label img-upload-lable"><span class="required">*</span>自提点图片：</label>
        <div class="layui-input-block img-upload">
            <div class="upload-img-block">
                <div class="upload-img-box {if !empty($leader_info.community_img)}hover{/if}">
                    <div class="ns-upload-default" id="storeUpload">
                        {if empty($leader_info.community_img)}
                        <div class="upload">
                            <img src="SHOP_IMG/upload_img.png" />
                            <p>点击上传</p>
                        </div>
                        {else/}
                        <div id="preview_storeUpload" class="preview_img">
                            <img layer-src src="{:img($leader_info.community_img)}" class="img_prev"/>
                        </div>
                        {/if}

                    </div>
                    <div class="operation"  >
                        <div >
                            <i title="图片预览" class="iconfont iconreview js-preview" style="margin-right: 20px;"></i>
                            <i title="删除图片" class="layui-icon layui-icon-delete js-delete"></i>
                        </div>
                        <div class="replace_img js-replace">点击替换</div>
                    </div>
                    <input type="hidden" name="community_img" value="{$leader_info.community_img}" lay-verify="required" placeholder="请上传自提点图片">
                </div>
            </div>
        </div>
        <div class="ns-word-aux">
            <p>门店图片在PC及移动端对应页面及列表作为门店标志出现。</p>
            <p>建议图片尺寸：100 * 100像素，图片格式：jpg、png、jpeg。</p>
        </div>
    </div>


    <!--自提点地址-->
    <div class="layui-form-item" style="width: 100%">
        <label class="layui-form-label"><span class="required">*</span>社区地址：</label>
        <div class="layui-input-inline ns-len-mid area-select">
            <select name="province_id" lay-filter="province_id" lay-verify="province_id">
                <option value="">请选择省份</option>
                {foreach $province_list as $k => $v}
                <option value="{$v.id}"  {if $leader_info.province_id == $v.id}select{/if}>{$v.name}</option>
                {/foreach}
            </select>
        </div>

        <div class="layui-input-inline ns-len-mid area-select">
            <select name="city_id"  lay-filter="city_id" lay-verify="city_id">
                <option value="">请选择城市</option>
            </select>
        </div>

        <div class="layui-input-inline ns-len-mid area-select">
            <select name="district_id"  lay-filter="district_id" lay-verify="district_id">
                <option value="">请选择区/县</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item"  style="width: 100%">
        <label class="layui-form-label"></label>
        <div class="layui-input-block">
            <input type="text" name="address"  placeholder="请填写门店的具体地址" value ="{$leader_info.address}" lay-verify="required" autocomplete="off" class="layui-input ns-len-long address-content">
            <input type = "hidden" name="longitude" lay-verify="required" class="layui-input" value ="{$leader_info.longitude}" />
            <input type = "hidden" name="latitude" lay-verify="required" class="layui-input" value ="{$leader_info.latitude}" />
            <button class='layui-btn-primary layui-btn' onclick="refreshFrom();">查找地址</button>
        </div>
        <div class="ns-word-aux">点击查找地址可在地图上显示输入的地理位置</div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">地图定位：</label>
        <div class="layui-input-block ns-special-length">
            <div id="container" class="selffetch-map"></div>
        </div>
        <div class="ns-word-aux empty-address">请选择地理位置！在地图上点击得到的地理位置会自动填入到对应的输入框中</div>
    </div>


    <div class="ns-form-row "  style="width: 100%">
        <input type="hidden" name="cl_id" value="{$leader_info.cl_id}">
        <button class="layui-btn ns-bg-color" lay-submit lay-filter="save">保存</button>
        <button class="layui-btn layui-btn-primary" onclick="back()">返回</button>
    </div>

</div>


{/block}
{block name="script"}
<script type="text/javascript" src="{$http_type}://webapi.amap.com/maps?v=1.4.6&amp;key=2df5711d4e2fd9ecd1622b5a53fc6b1d"></script>
<script type="text/javascript" src="SHOP_JS/address.js"></script>
<script type="text/javascript" src="STATIC_JS/map_address.js"></script>
<script>
    var form, repeat_flag, map_class;

    layui.use(['form'], function() {
        form = layui.form;
        repeat_flag = false;//防重复标识

        form.render();

        var initdata = {province_id : '{$leader_info.province_id}', city_id : '{$leader_info.city_id}', district_id : '{$leader_info.district_id}'};
        initAddress(initdata, "editleader");

        if('{$leader_info.latitude}' == "" || '{$leader_info.longitude}' == ""){
            var latlng = {lat:'',lng:''};
        }else{
            var latlng = {lat:'{$leader_info.latitude}',lng:'{$leader_info.longitude}'};
        }

        //地图展示
        map_class = new mapClass("container",latlng);

        /**
         * 验证码
         */
        form.verify({
            required : function(value, item){
                var msg = $(item).attr("placeholder") != undefined ? $(item).attr("placeholder") : '';
                if(value == '') return msg;
            },
            level_id : function(value, item){
                if(value == ''){
                    return '请选择等级';
                }
            },
            province_id : function(value, item){
                if(value == ''){
                    return '请选择省份';
                }
            },
            city_id : function(value, item){
                if(value == ''){
                    return '请选择城市';
                }
            },
            district_id : function(value, item){
                if(value == ''){
                    return '请选择区/县';
                }
            },
            mobile : function(value, item) {
                var tel = /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/; //固定电话
                var phone = /^1[345678]\d{9}$/; //手机
                if (value != '') {
                    if (!(tel.test(value)) && !(phone.test(value))) {
                        return '请输入正确的电话号码或手机号！';
                    }
                }
            },
        });

        // 门店logo
        var upload = new Upload({
            elem: '#storeUpload'
        });

        /**
         * 监听提交
         */
        form.on('submit(save)', function(data){

            if( data.field.longitude == "" || data.field.latitude == ""){
                layer.msg('请确认地理位置!');
                $(".empty-address").show();
                return;
            }else{
                $(".empty-address").hide();
            }

            data.field.full_address = $("select[name=province_id] option:selected").text()+$("select[name=city_id] option:selected").text()+$("select[name=district_id] option:selected").text();

            // 删除图片
            if(!data.field.community_img) upload.delete();

            if(repeat_flag) return;
            // repeat_flag = true;

            $.ajax({
                type : "POST",
                dataType: 'JSON',
                url : ns.url("shop/community/editLeader"),
                async : true,
                data : data.field,
                success : function(res) {
                    repeat_flag = false;

                    if (res.code == 0) {
                        layer.confirm('修改成功', {
                            title: '操作提示',
                            btn: ['返回列表', '继续修改'],
                            closeBtn: 0,
                            yes: function() {
                                location.href = ns.url("shop/community/lists")
                            },
                            btn2: function() {

                            }
                        });
                    } else {
                        layer.msg(res.message);
                    }
                }
            })
        });



    });

    function back() {
        location.href = ns.url("shop/community/lists");
    }

    /**
     * 重新渲染表单
     */
    function refreshFrom(){
        form.render();
        orderAddressChange();//改变地址
        map_class.mapChange();
    }

    //动态改变订单地址赋值
    function orderAddressChange(){
        map_class.address.province = $("select[name=province_id]").val();
        map_class.address.province_name = $("select[name=province_id] option:selected").text();
        map_class.address.city = $("select[name=city_id]").val();
        map_class.address.city_name = $("select[name=city_id] option:selected").text();
        map_class.address.district = $("select[name=district_id]").val();
        map_class.address.district_name = $("select[name=district_id] option:selected").text();
        map_class.address.detail_address = $("input[name=address]").val()
    }

    /**
     * 地址下拉框（主要用于坐标记录）
     */
    function selectCallBack(){
        $("input[name=longitude]").val(map_class.address.longitude);//坐标
        $("input[name=latitude]").val(map_class.address.latitude);//坐标
    }

    //地图点击回调事件
    function mapChangeCallBack(){
        $("input[name=address]").val(map_class.address.address);//详细地址
        $("input[name=longitude]").val(map_class.address.longitude);//坐标
        $("input[name=latitude]").val(map_class.address.latitude);//坐标

        $.ajax({
            type : "POST",
            dataType: 'JSON',
            url : ns.url("shop/address/getGeographicId"),
            async : true,
            data : {
                "address" : map_class.address.area
            },
            success : function(data) {
                map_class.address.province = data.province_id;
                map_class.address.city = data.city_id;
                map_class.address.district = data.district_id;
                map_class.address.township = data.subdistrict_id;
                map_class.map_change = false;
                form.val("editleader", {
                    "province_id": data.province_id
                });
                $("select[name=province_id]").change();
                form.val("editleader", {
                    "city_id": data.city_id
                });
                $("select[name=city_id]").change();
                form.val("editleader", {
                    "district_id": data.district_id
                });
                refreshFrom();//重新渲染form
                map_class.map_change = true;
            }
        });
    }


</script>
{/block}